<template>
  <mt-popup v-model="visible" position="bottom" style="width:100%;">
    <div class="mint-datetime" ref="bankPicker">
      <mt-picker class="mint-datetime-picker"
                 :slots="slots"
                 value-key="name"
                 :visible-item-count="visibleItemCount"
                 @change="onValuesChange"
                 showToolbar>
          <span class="mint-datetime-action mint-datetime-cancel"
                @click="handleClose">{{ cancelText }}</span>
        <span class="mint-datetime-action mint-datetime-confirm"
              @click="fillBank">{{ confirmText }}</span>
      </mt-picker>
    </div>
  </mt-popup>
</template>

<script>
  import {bank_name} from '../../assets/js/banks'

  export default {
    name: 'BackPicker',
    props: {
      value: {
        type: Boolean,
        default: false
      },
      visibleItemCount: {
        type: Number,
        default: 5
      },
      cancelText: {
        type: String,
        default: '取消'
      },
      confirmText: {
        type: String,
        default: '确定'
      },
    },
    data() {
      return {
        visible: this.value,
        slots: [{
          flex: 1,
          values: [],
          className: 'slot1',
          textAlign: 'center'
        }],
        bankName: ''
      }
    },
    mounted() {
      this.initBank();
      this.$refs.bankPicker.getElementsByClassName('picker-center-highlight')[0]
        .className += ' temp-picker-border'
    },
    methods: {
      initBank() {
        for (let item of bank_name) {
          let {name, value} = item;
          this.slots[0].values.push({name, value});
        }
      },
      onValuesChange(picker, val) {
        if (val[0]) {
          this.bankName = val[0].name;
        }
      },
      handleClose() {
        this.$emit('pickerClose', (this.visible = false))
      },
      fillBank(evt) {
        this.handleClose();
        if (this.bankName) {
          this.$emit('complete', this.bankName);
        }
      }
    },
    watch: {
      value(val) {
        this.visible = val;
      },
      visible(val) {
        this.$emit('input', val);
      }
    }
  }
</script>

<style lang="scss">
  .temp-picker-border {
    @mixin bgColor {
      $bgVar: left, #FAFAFA, #5F5F5F, #FAFAFA;
      background: -moz-linear-gradient($bgVar);
      background: -o-linear-gradient($bgVar);
      background: -webkit-linear-gradient($bgVar);
    }
    &:before, &:after {
      @include bgColor;
    }
  }
</style>
